<template>
    <view>
        <u-navbar fixed bgColor="transparent" :shadow="navbar.shadow" :bgColor="navbar.bgColor"
            :border="navbar.bgColor != 'transparent'">
            <view slot="left" class="d-flex">
                <text class="d-font-28" :style="{ color: navbar.bgColor == 'transparent' ? '#fff' : '#151C24' }"></text>
            </view>
            <view slot="right">
                <view class="d-flex">
                    <!-- <u--image src="/static/icon/icon-02.png" width="44rpx" height="44rpx"></u--image> -->
                    <u-icon class="u-m-l-20" name="scan" size="26"
                        :color="navbar.bgColor == 'transparent' ? '#fff' : '#151C24'"></u-icon>
                </view>
            </view>
        </u-navbar>

        <view class="d-p-b-20">
            <u-swiper circular height="350rpx" :loading="banner.length == 0" :list="banner" keyName="attachUrl"
                @change="e => (current = e.current)">
                <view slot="indicator" class="indicator">
                    <view class="indicator__dot" v-for="(item, index) in banner" :key="index"
                        :class="[index === current && 'indicator__dot--active']"></view>
                </view>
            </u-swiper>
        </view>
        <view>
            <u-grid col="4">
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="app">
                    <u--image src="/static/icon/icon-80.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">项目</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="special">
                    <u--image src="/static/icon/icon-81.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">专户</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="member">
                    <u--image src="/static/icon/icon-42.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">人员</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="work">
                    <u--image src="/static/icon/icon-05.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">考勤</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="wages">
                    <u--image src="/static/icon/icon-06.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">工资</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="warning">
                    <u--image src="/static/icon/icon-82.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">预警</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="supervise">
                    <u--image src="/static/icon/icon-83.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">督办</text>
                </u-grid-item>
                <u-grid-item :customStyle="{ marginTop: '30rpx' }" @click="count">
                    <u--image src="/static/icon/icon-43.png" width="97rpx" height="97rpx"></u--image>
                    <text class="d-font-24">统计分析</text>
                </u-grid-item>
            </u-grid>
        </view>
        <view class="d-p-30">
            <template v-if="cpg">
                <view class="d-m-t-20"><text class="d-font-36" style="font-weight: bold;">单位概况</text></view>
                <view class="card d-m-t-30 d-p-30" @click="enterprise">
                    <view class="d-font-32 d-m-b-30 d-flex" style="color: #323334;font-weight: bold;">
                        <u--image src="/static/icon/icon-44.png" width="48rpx" height="48rpx"></u--image>
                        <text class="d-m-l-20">{{ cpg.qymc || '无数据源' }}</text>
                    </view>
                    <view class="d-flex" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24">
                            <text style="">法人姓名</text>
                            <text class="d-m-l-20">{{ cpg.qyfzr || '无数据源' }}</text>
                        </view>
                        <view class="d-flex-1 d-font-24">
                            <text style="">注册地</text>
                            <text class="d-m-l-20">{{ cpg.qyssqh || '无数据源' }}</text>
                        </view>
                    </view>
                    <view class="d-flex d-m-t-20" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24 d-flex">
                            <text style="">系统管理员电话</text>
                            <view class="d-m-l-20">
                                <u--text color="#21A5F3" size="24rpx" mode="phone" call :text="cpg.qyfzrlxdh||'无数据源'">
                                </u--text>
                            </view>
                        </view>
                    </view>
                    <view class="d-flex d-m-t-20" style="color: #5D6672;">
                        <view class="d-flex-1 d-font-24 d-flex">
                            <text style="">统一社会信用代码</text>
                            <text class="d-m-l-20 u-line-1 d-flex-1">{{ cpg.tyshxydm || '无数据源' }}</text>
                        </view>
                    </view>
                </view>
            </template>
            <view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">数据看板</text></view>

            <view class="card d-m-t-30 d-p-30">
                <view class="d-flex d-m-b-30">
                    <view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">项目情况</view>
                    <text class="d-font-26" style="color: #8E9291;">单位: 个</text>
                </view>
                <appChart :project="project"></appChart>
            </view>

            <view class="card d-m-t-30 d-p-30">
                <view class="d-flex d-m-b-30">
                    <view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">开户情况统计</view>
                    <text class="d-font-26" style="color: #8E9291;">单位: 个</text>
                </view>
                <openChart :account="account"></openChart>
            </view>

            <view class="card d-m-t-30 d-p-30">
                <view class="sub-title d-font-30" style="color: #0882F3;">工人情况</view>
                <view class="d-flex d-m-t-20">
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-46.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">{{ ssu ? ssu.staffs : 0 }}
                            </view>
                            <view class="d-font-24" style="color: #5D6672;">实名制人数</view>
                        </view>
                    </view>
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-48.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ ssu ? ssu.istaffs : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">进场工人数</view>
                        </view>
                    </view>
                </view>
                <view class="d-flex d-m-t-20">
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-49.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ ssu ? ssu.ostaffs : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">离场工人数</view>
                        </view>
                    </view>
                    <view class="d-flex-1 d-flex d-col-top">
                        <u--image src="/static/icon/icon-88.png" width="58rpx" height="58rpx"></u--image>
                        <view class="d-flex-1 d-p-l-30">
                            <view class="d-font-48" style="color: #162233;font-weight: bold;">
                                {{ ssu ? ssu.atdStaffs : 0 }}</view>
                            <view class="d-font-24" style="color: #5D6672;">考勤工人数</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import appChart from "./components/appChart.vue";
import openChart from "./components/openChart.vue";
import {
    fileList,
    cpgOverview,
    projectDis,
    accountCount,
    ssuCount,
} from "../../common/api.js";
export default {
    components: {
        appChart,
        openChart,
    },
    data() {
        return {
            current: 0,
            banner: [],
            cpg: null, // 单位情况
            project: null, // 项目情况
            account: null, // 开户情况
            ssu: null, // 工人情况
            navbar: {
                bgColor: "transparent",
                shadow: false,
            },
        };
    },
    onLoad() {},
    onShow() {
        this.init();
    },
    // 页面滚动
    onPageScroll(e) {
        if (e.scrollTop > 45) {
            this.navbar.bgColor = "#fff";
            this.navbar.shadow = true;
        } else {
            this.navbar.bgColor = "transparent";
            this.navbar.shadow = false;
        }
    },
    methods: {
        init() {
            fileList({
                params: {
                    ywlx: "focus_map",
                    bid: "focus_map_20210000001",
                    attachType: "focus_map",
                },
            }).then((e) => {
                this.banner = e.rows;
                this.cpgOverview(); // 单位概况
                this.projectDis(); // 项目情况
                this.accountCount(); // 开户情况
                this.ssuCount(); // 工人情况
            });
        },
        cpgOverview() {
            // 单位概况
            cpgOverview({
                params: {
                    deptId: this.$user.deptId,
                },
            }).then((e) => {
                this.cpg = e.data.jbxxMap;
            });
        },
        projectDis() {
            // 项目情况
            projectDis({
                params: {
                    deptId: this.$user.deptId,
                },
            }).then((e) => {
                this.project = e.data;
            });
        },
        accountCount() {
            // 开户情况
            accountCount({
                params: {
                    deptId: this.$user.deptId,
                },
            }).then((e) => {
                this.account = e.data;
            });
        },
        ssuCount() {
            // 工人情况
            ssuCount({
                params: {
                    deptId: this.$user.deptId,
                },
            }).then((e) => {
                this.ssu = e.data;
            });
        },
        work() {
            uni.$u.route({
                url: "/pages/index/work/work",
            });
        },
        supervise() {
            uni.$u.route({
                url: "/pages/index/supervise/supervise",
            });
        },
        warning() {
            uni.$u.route({
                url: "/pages/index/warning/warning",
            });
        },
        wages() {
            uni.$u.route({
                url: "/pages/index/wages/wages",
            });
        },
        count() {
            uni.$u.route({
                url: "/pages/index/count/count",
            });
        },
        enterprise() {
            uni.$u.route({
                url: "/pages/index/enterprise/enterprise",
                params: {
                    id: this.$user.ssqybh,
                },
            });
        },
        member() {
            uni.$u.route({
                url: "/pages/index/member/index",
            });
        },
        special() {
            uni.$u.route({
                url: "/pages/index/special/special",
            });
        },
        app() {
            uni.$u.route({
                url: "/pages/index/app/app",
            });
        },
    },
};
</script>

<style lang="scss">
.indicator {
    @include flex(row);
    justify-content: center;

    &__dot {
        height: 4rpx;
        width: 20rpx;
        border-radius: 100rpx;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5rpx;
        transition: background-color 0.3s;
        &--active {
            background-color: #ffffff;
            width: 28rpx;
        }
    }
}
page {
    background-color: #fbfcfc;
}
.card {
    box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
    border-radius: 10rpx;
    background-color: #ffffff;

    .sub-title {
        position: relative;
        padding-left: 20rpx;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 8rpx;
            height: 22rpx;
            background: #13a4fe;
            border-radius: 4rpx;
            bottom: 0;
            margin: auto;
        }
    }
}
</style>
